<template>
  <page-view :title="false">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="5" :sm="15">
              <a-form-item label="菜单名称">
                <a-input placeholder="请输入" v-model="queryParam.menuName"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="this.fetch">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button v-action:add class="editable-add-btn" @click="$refs.modal.add()">新增</a-button>
      </div>
      <a-table
        v-if="$auth('menu.treeMenu')"
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :rowKey="record => record.id"
        bordered >
        <template slot="menuType" slot-scope="text">
          {{ text | menuTypeFilter }}
        </template>
        <a-icon slot="icon" slot-scope="text" :type="text" />
        <template slot="operation" slot-scope="text, record">
          <a v-action:update @click="handleEdit(record)"><a-icon type="edit" />编辑</a>
          <a-popconfirm
            title="确认删除?"
            @confirm="() => handleDel(record.id)"
          >
            <a-divider type="vertical" />
            <a v-action:delete href="javascript:;"><a-icon type="delete" />删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <menu-modal ref="modal" @ok="handleOk" />
    </a-card>
  </page-view>
</template>

<script>
    import { PageView } from '@/layouts'
    import { axios } from '../../utils/request'
    import MenuModal from './MenuModal'
    const menuColumns = [
    {
      title: '菜单名称',
      dataIndex: 'meta.title'
    },
    {
      title: '类型',
      dataIndex: 'menuType',
      scopedSlots: { customRender: 'menuType' }
    },
    {
      title: '路由标识',
      dataIndex: 'name'
    },
    {
      title: '组件名称',
      dataIndex: 'component'
    },
    {
      title: '重定向',
      dataIndex: 'redirect'
    },
    {
      title: '图标',
      dataIndex: 'meta.icon',
      scopedSlots: { customRender: 'icon' }
    },
      {
        title: '权限标识',
        dataIndex: 'permis'
      },
    {
      title: '状态',
      dataIndex: 'show',
      customRender:(value,row,index)=> value==1?'隐藏':'显示'
    },
    {
        title: '操作',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' }
      }
  ]
    export default {
        mounted () {
          this.fetch()
        },
        name: 'MenuList',
        components: {
          PageView,
          MenuModal
        },
        data () {
              return {
                data: [],
                columns: menuColumns,
                queryParam:{}
              }
        },
        methods: {
          fetch () {
            axios({
              url: '/menu/treeMenu',
              method: 'get',
              params: this.queryParam
            })
          .then((response) => {
              // eslint-disable-next-line eqeqeq
                if (response.code == 200) {
                  this.data = response.result
                } else {
                  this.$message.error(response.message)
                }
            })
          },
          handleDel (id) {
            axios.delete('/menu/delete/'+id).then((response)=>{
              if (response.code == 200) {
                this.fetch()
                this.$message.success('删除成功！')
              } else {
                this.$message.error('删除失败！'+response.msg)
              }
            })
          },
          handleEdit (record) {
            this.$refs.modal.edit(record)
          },
          handleOk () {
            this.fetch()
          }
        },
      filters: {
        menuTypeFilter (type) {
          const menuMap = {
            'M': '菜单',
            'B': '按钮'
          }
          return menuMap[type]
        }
      }

    }
</script>
<style lang="less" scoped>
  .table-operator{
    margin-bottom: 8px;
  }
</style>
